<!--
 * @Description: 腾讯视频响应式布局
 * @Author: charles
 * @Date: 2021-08-19 09:54:02
 * @LastEditors: charles
 * @LastEditTime: 2021-08-19 11:08:08
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>腾讯视频</title>
  <style>
    /*  screen < 1280px   990px   */
    /*  1280px < screen < 1400px   1200px*/
    /*  screen > 1400px   1400px*/
    html {font: 12px '微软雅黑'; color: #666;}
    body {
      margin: 0;
    }
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .container {}
    .content {
      padding-top: 10px;
      min-height: 100px;
      background-color: #f4f4f4;
      margin: 0 auto;
    }
    ul.videos::after {
      content: "";
      display: block;
      clear: both;
    }
    ul.videos > li.video { 
      float: left;
      margin-bottom: 10px;
      background-color: #f4f4f4;
    }
    @media screen and (max-width:1279px) {
      .content {
        width: 990px;
        background-color: thistle;
      }
      ul.videos > li.video {
        width: 250px;
        margin-right: 15px;
        height: 200px;
      }
      /* 10px * 3 + 2x + y = 990 */
      ul.videos > li.video:first-child {
        width: 460px;
        height: 410px;
      }
      ul.videos > li.video:nth-child(3),
      ul.videos > li.video:nth-child(5){
          margin-right: 0;
      }
      ul.videos > li.video:nth-child(n+6) {
        display: none;
      }
    }
    @media screen and (min-width:1280px) and (max-width:1400px) {
      .content {
        width: 1200px;
        background-color: tomato;
      }
      /*7 */
      /* 10px * 3 + 3x + y = 1200 */
      /* 10px * 3 + 3*200 + 570 = 1200 */
      ul.videos > li.video {
        width: 200px;
        margin-right: 10px;
        height: 180px;
      }
      ul.videos > li.video:first-child {
        width: 570px;
        height: 370px;
      }
      ul.videos > li.video:nth-child(4),
      ul.videos > li.video:nth-child(7)
      {
          margin-right: 0;
      }

      ul.videos > li.video:nth-child(n+8) {
        display: none;
      }
    }

    @media screen and (min-width:1400px) {
      .content {
        width: 1400px;
        background-color: violet;
      }
      /*9 */
      /* 10px * 4 + 4x + y = 1400 */
      /* 10px * 4 + 4*220 + 480 = 1400 */
      ul.videos > li.video {
        width: 220px;
        margin-right: 10px;
        height: 200px;
      }
      ul.videos > li.video:first-child {
        width: 480px;
        height: 410px;
      }
      ul.videos > li.video:nth-child(5),
      ul.videos > li.video:nth-child(9)
      {
          margin-right: 0;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="content">
      <ul class="videos">
        <li class="video"></li>
        <li class="video"></li>
        <li class="video"></li>
        <li class="video"></li>
        <li class="video"></li>
        <li class="video"></li>
        <li class="video"></li>
        <li class="video"></li>
        <li class="video"></li>
      </ul>
    </div>
  </div>
</body>
</html>
